<template>
    <div>
        <h1>医生列表</h1>
        <a href="/">主页</a>
        <br>
        <a href="/dadd">医生新增</a>
            <table class="table">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>姓名</td>
                        <td>头像</td>
                        <td>科室</td>
                        <td>创建日期</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="d in data">
                        <td>{{d.did}}</td>
                        <td>{{d.dname}}</td>
                        <td><img :src="'https://localhost:7173/'+d.dimage" style="width: 60px;height: 60px;"></td>
                        <td>{{d.rname}}</td>
                        <td>{{moment(d.dtime).format("yyyy-MM-DD HH:mm:ss")}}</td>
                    </tr>
                </tbody>
            </table>
            共{{page.totanum}}条,每页{{list.size}}条,共{{page.totapage}}页,当前第{{list.index}}页
            <input type="button" value="首页" @click="fy(1)">
            <input type="button" value="上一页" @click="fy(2)">
            <input type="button" v-for="m in page.totapage" :value="m" @click="ym(m)">
            <input type="button" value="下一页" @click="fy(3)">
            <input type="button" value="尾页" @click="fy(4)">
            <input type="number" v-model="list.index" @change="tz(list.index)">
            <select v-model="list.size" @change="yrl">
                <option value="2">请选择</option>
                <option value="3">每页3条</option>
                <option value="5">每页5条</option>
                <option value="10">每页10条</option>
            </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import moment from 'moment'
import { LanguageVariant } from 'typescript';
const router=useRouter();
const route=useRoute();
const data=ref([{
    "did": 2,
      "dname": "string",
      "dimage": "string",
      "rid": 4,
      "dtime": "2025-05-19T11:41:06.4876217",
      "rname": "中医科室"
}])
const list=ref({
    index:1,
    size:2
})
const page=ref({
    totanum:0,
    totapage:0
})
onMounted(() => {
    show()
})
const show=()=>{
    axios.get("/api/Doute/GetDoute",{params:list.value}).then(res=>{
        data.value=res.data.list
        page.value.totanum=res.data.listcount
        page.value.totapage=Math.ceil(page.value.totanum/list.value.size)
    })
}
const fy=(val:any)=>{
    if(val==1){
        list.value.index=1
        show()
    }
    if(val==2){
        if(list.value.index>1){
            list.value.index-=1
            show()
        }
        
    }
    if(val==3){
        if(list.value.index<page.value.totapage){
            list.value.index+=1
            show()
        }
        
    }
    if(val==4){
        list.value.index=page.value.totapage
        show()
    }
}
const ym=(val:any)=>{
    list.value.index=val
    show()
}
const tz=(val:any)=>{
    if(list.value.index>0&&list.value.index<=page.value.totapage){
        list.value.index=val
        show()
    }else{
        list.value.index=1
    }
}
const yrl=()=>{
    list.value.index=1
    show()
}
</script>

<style scoped>

</style>